<template>
	<el-col :span="12" id="keywordSearch">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>关键词搜索</span>
			</div>
			<div class="charts">
				<v-chart :options="searchUserCount" class="mr-10" />
				<v-chart :options="searches" />
			</div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="ranking" label="排名"></el-table-column>
				<el-table-column prop="keywords" label="关键词"></el-table-column>
				<el-table-column prop="totalSearches" label="总搜索量"></el-table-column>
				<el-table-column prop="userTotal" label="索量用户总数"></el-table-column>
				<el-table-column prop="clickrate" label="点击率"></el-table-column>
			</el-table>
			<el-pagination class="page" background layout="prev, pager, next" :total="100"></el-pagination>
		</el-card>
	</el-col>
</template>
<script>
export default {
	name: 'keywordSearch',
	props: {
		searchUserCount: Object,
		searches: Object,
	},
	data() {
		return {
			tableData: [
				{
					ranking: '1',
					keywords: '上海',
					totalSearches: '1002',
					userTotal: '99898',
					clickrate: '90%',
				},
				{
					ranking: '2',
					keywords: '上海',
					totalSearches: '1002',
					userTotal: '99898',
					clickrate: '90%',
				},
				{
					ranking: '3',
					keywords: '上海',
					totalSearches: '1002',
					userTotal: '99898',
					clickrate: '90%',
				},
				{
					ranking: '4',
					keywords: '上海',
					totalSearches: '1002',
					userTotal: '99898',
					clickrate: '90%',
				},
			],
		};
	},
	methods: {},
};
</script>
<style lang="scss">
#keywordSearch {
	.charts {
		display: flex;
		height: 100px;
		justify-content: space-around;
	}
	.mr-10 {
		margin-right: 10px;
	}
	.page {
		margin-top: 10px;
		text-align: right;
	}
}
</style>
